<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>trae</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/prism.min.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <main>
      <div class="content">
        <div class="title">
          <h1>trae<h1>, <h2><i>the fetch library</i><h2>
        </div>
        <h3 class="author">
          by <a href="https://github.com/Huemul/" target="_blank" rel="noopener"><i>Huemul</i></a>
        </h3>
        <pre id="result" class="code">
          <code class="language-javascript">
  const result = document.getElementById('result');
  const url = 'https://jsonplaceholder.typicode.com/posts/1';

  function success(res) {
    res.data.title = res.data.title.slice(0, 8);
    res.data.body = res.data.body.slice(0, 20) + '...';
    return Promise.resolve(res);
  }

  trae.after(success);

  trae.get(url)
    .then((res) => {
      let html = '\n// request final reponse\n';
      html += JSON.stringify(res, null, '\t');
      result.innerHTML += html;
    });
          </code>
          <div id="loading-text" ></div>
        </pre>
        <a href="https://huemul.github.io/trae-examples">
          <h4>See more examples</h4>
        </a>
        <a class="github" href="https://github.com/Huemul/trae#trae">
          <i class="github-logo"></i>
        </a>

      </div>
    </main>
    <script src='https://unpkg.com/trae'></script>
    <script src='js/prism.min.js'></script>
    <script src='js/main.js'></script>
  </body>
</html>
